<!-- JSON渲染器演示页面 -->
<template>
  <view class="json-demo-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">JSON渲染器演示</text>
      <text class="page-subtitle">根据JSON配置动态渲染页面组件</text>
    </view>

    <!-- JSON配置输入区域 -->
    <view class="config-section">
      <view class="section-title">JSON配置</view>
      <textarea 
        class="json-input"
        v-model="jsonConfigText"
        placeholder="请输入JSON配置..."
        @input="onJsonInput"
      />
      <view class="button-group">
        <button class="btn btn-primary" @click="loadDefaultConfig">加载默认配置</button>
        <button class="btn btn-secondary" @click="clearConfig">清空配置</button>
        <button class="btn btn-success" @click="validateJson">验证JSON</button>
      </view>
    </view>

    <!-- 渲染结果区域 -->
    <view class="render-section">
      <view class="section-title">渲染结果</view>
      <view v-if="jsonError" class="error-message">
        <text class="error-text">{{ jsonError }}</text>
      </view>
      <view v-else-if="parsedConfig" class="render-container">
        <s-json-renderer 
          :config="parsedConfig"
          :debug="true"
          @componentEvent="onComponentEvent"
        />
      </view>
      <view v-else class="empty-state">
        <text class="empty-text">请输入JSON配置来渲染页面</text>
      </view>
    </view>

    <!-- 事件日志 -->
    <view class="log-section">
      <view class="section-title">事件日志</view>
      <view class="log-container">
        <view 
          v-for="(log, index) in eventLogs" 
          :key="index"
          class="log-item"
        >
          <text class="log-time">{{ log.time }}</text>
          <text class="log-type">{{ log.type }}</text>
          <text class="log-data">{{ JSON.stringify(log.data) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import SJsonRenderer from '@/sheep/components/s-json-renderer/s-json-renderer.vue';

  // 响应式数据
  const jsonConfigText = ref('');
  const parsedConfig = ref(null);
  const jsonError = ref('');
  const eventLogs = ref([]);

  // 默认JSON配置
  const defaultConfig = {
    "page": {
      "description": "租车平台首页配置",
      "backgroundColor": "#f5f6fa",
      "backgroundImage": ""
    },
    "navigationBar": {
      "bgType": "color",
      "bgColor": "#fff",
      "bgImg": "",
      "styleType": "normal",
      "alwaysShow": true
    },
    "components": [
      {
        "id": "SearchNavbar",
        "property": {
          "searchPlaceholder": "搜索感兴趣的车型",
          "style": {
            "bgType": "color",
            "bgColor": "transparent",
            "position": "absolute",
            "top": "20rpx",
            "left": "20rpx",
            "right": "20rpx",
            "zIndex": 999
          }
        }
      },
      {
        "id": "Carousel",
        "property": {
          "type": "default",
          "indicator": "custom",
          "autoplay": true,
          "interval": 3000,
          "duration": 500,
          "circular": true,
          "items": [
            {
              "type": "img",
              "imgUrl": "https://picsum.photos/750/500?random=1&text=昆明游租车更自由",
              "title": "昆明游，租车更自由！",
              "url": "/pages/index/rental"
            },
            {
              "type": "img",
              "imgUrl": "https://picsum.photos/750/500?random=2&text=海量优质车型任你选",
              "title": "海量优质车型任你选",
              "url": "/pages/goods/list"
            }
          ],
          "style": {
            "bgType": "color",
            "bgColor": "#fff",
            "marginBottom": 0,
            "height": "500rpx",
            "borderRadius": "0"
          }
        }
      },
      {
        "id": "MenuSwiper",
        "property": {
          "layout": "iconText",
          "row": 1,
          "column": 5,
          "list": [
            {
              "title": "租车",
              "titleColor": "#333",
              "emoji": "🚗",
              "bgColor": "#ff7675",
              "url": "/pages/index/rental",
              "badge": {
                "show": false,
                "textColor": "#fff",
                "bgColor": "#FF6000"
              }
            },
            {
              "title": "驾考",
              "titleColor": "#333",
              "emoji": "📖",
              "bgColor": "#74b9ff",
              "url": "/pages/index/index",
              "badge": {
                "show": false,
                "textColor": "#fff",
                "bgColor": "#FF6000"
              }
            }
          ],
          "style": {
            "bgType": "color",
            "bgColor": "#f5f6fa",
            "marginBottom": 0,
            "padding": "20rpx"
          }
        }
      }
    ]
  };

  // JSON输入处理
  const onJsonInput = () => {
    parseJsonConfig();
  };

  // 解析JSON配置
  const parseJsonConfig = () => {
    try {
      if (!jsonConfigText.value.trim()) {
        parsedConfig.value = null;
        jsonError.value = '';
        return;
      }

      const config = JSON.parse(jsonConfigText.value);
      parsedConfig.value = config;
      jsonError.value = '';
      
      console.log('JSON配置解析成功:', config);
    } catch (error) {
      jsonError.value = `JSON解析错误: ${error.message}`;
      parsedConfig.value = null;
      console.error('JSON解析失败:', error);
    }
  };

  // 加载默认配置
  const loadDefaultConfig = () => {
    jsonConfigText.value = JSON.stringify(defaultConfig, null, 2);
    parseJsonConfig();
  };

  // 清空配置
  const clearConfig = () => {
    jsonConfigText.value = '';
    parsedConfig.value = null;
    jsonError.value = '';
    eventLogs.value = [];
  };

  // 验证JSON
  const validateJson = () => {
    parseJsonConfig();
    if (!jsonError.value) {
      uni.showToast({
        title: 'JSON格式正确',
        icon: 'success'
      });
    } else {
      uni.showToast({
        title: 'JSON格式错误',
        icon: 'error'
      });
    }
  };

  // 组件事件处理
  const onComponentEvent = (event) => {
    const log = {
      time: new Date().toLocaleTimeString(),
      type: event.type,
      data: event.data
    };
    
    eventLogs.value.unshift(log);
    
    // 限制日志数量
    if (eventLogs.value.length > 20) {
      eventLogs.value = eventLogs.value.slice(0, 20);
    }

    console.log('组件事件:', event);
  };

  // 页面加载时加载默认配置
  onMounted(() => {
    loadDefaultConfig();
  });
</script>

<style lang="scss" scoped>
.json-demo-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 20rpx;

  .page-header {
    text-align: center;
    margin-bottom: 40rpx;

    .page-title {
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 16rpx;
    }

    .page-subtitle {
      font-size: 28rpx;
      color: #666;
      display: block;
    }
  }

  .config-section,
  .render-section,
  .log-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
      border-bottom: 2rpx solid #f0f0f0;
      padding-bottom: 16rpx;
    }
  }

  .json-input {
    width: 100%;
    height: 400rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 24rpx;
    font-family: 'Courier New', monospace;
    background: #fafafa;
    margin-bottom: 20rpx;
  }

  .button-group {
    display: flex;
    gap: 20rpx;
    flex-wrap: wrap;

    .btn {
      padding: 16rpx 32rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;

      &.btn-primary {
        background: #007aff;
        color: #fff;
      }

      &.btn-secondary {
        background: #6c757d;
        color: #fff;
      }

      &.btn-success {
        background: #28a745;
        color: #fff;
      }

      &:active {
        transform: scale(0.95);
        opacity: 0.8;
      }
    }
  }

  .error-message {
    background: #f8d7da;
    border: 1rpx solid #f5c6cb;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .error-text {
      color: #721c24;
      font-size: 24rpx;
    }
  }

  .render-container {
    border: 2rpx dashed #ddd;
    border-radius: 12rpx;
    min-height: 200rpx;
    overflow: hidden;
  }

  .empty-state {
    text-align: center;
    padding: 60rpx 20rpx;

    .empty-text {
      color: #999;
      font-size: 28rpx;
    }
  }

  .log-container {
    max-height: 400rpx;
    overflow-y: auto;

    .log-item {
      background: #f8f9fa;
      border-radius: 8rpx;
      padding: 16rpx;
      margin-bottom: 12rpx;
      border-left: 4rpx solid #007aff;

      .log-time {
        font-size: 20rpx;
        color: #666;
        display: block;
        margin-bottom: 8rpx;
      }

      .log-type {
        font-size: 24rpx;
        font-weight: 600;
        color: #007aff;
        display: block;
        margin-bottom: 8rpx;
      }

      .log-data {
        font-size: 22rpx;
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-all;
      }
    }
  }
}
</style>

